package com.dji.compose_learning.ui.view

import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.height
import androidx.compose.material.*
import androidx.compose.runtime.*
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.unit.dp
import com.google.accompanist.pager.ExperimentalPagerApi
import com.google.accompanist.pager.HorizontalPager
import com.google.accompanist.pager.pagerTabIndicatorOffset
import com.google.accompanist.pager.rememberPagerState
import kotlinx.coroutines.Dispatchers
import kotlinx.coroutines.launch

@OptIn(ExperimentalPagerApi::class)
@Composable
fun TabViewPagerPage() {
    var pages by remember {
        mutableStateOf(listOf("首页", "应用", "通讯录", "我的"))
    }
//    var selectedIndex by remember {
//        mutableStateOf(0)
//    }
    var pagerState = rememberPagerState(initialPage = 0)
    val scope = rememberCoroutineScope()
    Surface(
        modifier = Modifier
            .fillMaxSize(),
        color = MaterialTheme.colors.background) {
        Column {
            TabRow(selectedTabIndex = pagerState.currentPage, indicator = {
                TabRowDefaults.Indicator(Modifier.pagerTabIndicatorOffset(pagerState, it))
            }) {
                pages.forEachIndexed { index, tabText ->
                    Tab(selected = pagerState.currentPage == index,
                        onClick = {
                            scope.launch(Dispatchers.Main) {
                                pagerState.scrollToPage(index)
                            }
                        },
                        modifier = Modifier
                            .height(48.dp)
                            .align(alignment = Alignment.CenterHorizontally)) {
                        Text(text = tabText)
                    }
                }
            }

            HorizontalPager(count = pages.size,
                state = pagerState) { index ->
                when (index) {
                    0 -> TabPage1()
                    1 -> TabPage2()
                    2 -> TabPage3()
                    3 -> TabPage4()
                }
            }
        }
    }
}

@Composable
fun TabPage1() {
    Column(modifier = Modifier.fillMaxSize()) {
        Text(text = "这里是首页")
    }
}

@Composable
fun TabPage2() {
    Column(modifier = Modifier.fillMaxSize()) {
        Text(text = "这里是应用页")
    }
}

@Composable
fun TabPage3() {
    Column(modifier = Modifier.fillMaxSize()) {
        Text(text = "这里是通讯录")
    }
}

@Composable
fun TabPage4() {
    Column(modifier = Modifier.fillMaxSize()) {
        Text(text = "这里是我的")
    }
}




















